<template>
  <view class="notice-list-container">
    <view class="notice-header">
      <view class="notice-title">通知列表</view>
    </view>

    <view class="notice-tabs">
      <view
        v-for="(tab, index) in tabs"
        :key="index"
        :class="['tab-item', { active: activeTab === index }]"
        @tap="changeTab(index)"
      >
        {{ tab.name }}
      </view>
    </view>

    <view class="notice-content">
      <view
        v-for="notice in filteredNotices"
        :key="notice.id"
        class="notice-item"
        @tap="goToNoticeDetail(notice)"
      >
        <view class="notice-icon" :style="{ backgroundColor: getIconColor(notice.type) }">
          <uni-icons :type="getIconType(notice.type)" size="24" color="#fff" />
        </view>
        <view class="notice-content-right">
          <view class="notice-header-info">
            <view class="notice-title-text">{{ notice.title }}</view>
            <view class="notice-date">{{ notice.date }}</view>
          </view>
          <view class="notice-text">{{ notice.content }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { getNoticeListAPI } from '@/services/notice'
import type { NoticeItem, NoticeType } from '@/types/notice'

const activeTab = ref(0)
const noticeList = ref<NoticeItem[]>([])

// 标签页
const tabs = [{ name: '全部' }, { name: '系统通知' }, { name: '交易消息' }, { name: '订单通知' }]

// 切换标签
const changeTab = (index: number) => {
  activeTab.value = index
}

// 根据标签过滤通知
const filteredNotices = computed(() => {
  if (activeTab.value === 0) {
    return noticeList.value
  } else if (activeTab.value === 1) {
    return noticeList.value.filter((item) => item.type === 'system')
  } else if (activeTab.value === 2) {
    return noticeList.value.filter((item) => item.type === 'transaction')
  } else if (activeTab.value === 3) {
    return noticeList.value.filter((item) => item.type === 'order')
  }
  return noticeList.value
})

// 获取通知列表
const fetchNoticeList = async () => {
  const res = await getNoticeListAPI()
  noticeList.value = res.result
}

// 根据通知类型获取图标
const getIconType = (type: NoticeType): string => {
  const iconMap: Record<NoticeType, string> = {
    system: 'notification',
    transaction: 'wallet',
    order: 'paperplane',
    other: 'info',
  }
  return iconMap[type] || 'info'
}

// 根据通知类型获取图标颜色
const getIconColor = (type: NoticeType): string => {
  const colorMap: Record<NoticeType, string> = {
    system: '#FF6B6B',
    transaction: '#4ECDC4',
    order: '#45B7D1',
    other: '#96CEB4',
  }
  return colorMap[type] || '#96CEB4'
}

// 跳转到通知详情
const goToNoticeDetail = (notice: NoticeItem) => {
  uni.navigateTo({
    url: `/pages/notice/detail?id=${notice.id}`,
  })
}

// 页面加载
onMounted(() => {
  fetchNoticeList()
})
</script>

<style lang="scss">
page {
  background-color: #f7f7f7;
}

.notice-list-container {
  padding-bottom: 30rpx;
}

.notice-header {
  background-color: #fff;
  padding: 30rpx 40rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.notice-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.notice-tabs {
  display: flex;
  background-color: #fff;
  padding: 0 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 24rpx 0;
  font-size: 28rpx;
  color: #666;
  position: relative;
}

.tab-item.active {
  color: #27ba9b;
  font-weight: bold;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 4rpx;
  background-color: #27ba9b;
  border-radius: 2rpx;
}

.notice-content {
  padding: 0 30rpx;
}

.notice-item {
  display: flex;
  align-items: flex-start;
  background-color: #fff;
  margin-bottom: 20rpx;
  padding: 24rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.05);
}

.notice-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
  flex-shrink: 0;
}

.notice-content-right {
  flex: 1;
}

.notice-header-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.notice-title-text {
  font-weight: 600;
  font-size: 32rpx;
  color: #333;
}

.notice-date {
  color: #999;
  font-size: 24rpx;
}

.notice-text {
  color: #666;
  font-size: 28rpx;
  line-height: 1.5;
}
</style>
